<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="onClose"
  >
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="基础信息">
        <progress-base-info ref="progressBaseInfo" :record="model"></progress-base-info>
      </a-tab-pane>
      <a-tab-pane key="2" tab="施工记录">
        <construction-record ref="constructionRecord" :record="model"></construction-record>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script>

  import progressBaseInfo from './tabs/progress/progressBaseInfo'
  import constructionRecord from './tabs/progress/constructionRecord'
  import {getAction} from "@api/manage";

  export default {
    name: "progressInfoDetailModal",
    components:{
      progressBaseInfo,constructionRecord
    },
    data() {
      return {
        visible: false,
        title: "",
        width: '100%',
        model:{},
        url:{
          getProgressInfo: "/ghCustomerProgress/queryById",
        }
      }
    },
    methods: {
      callback(key) {
        console.log(key);
      },
      showDrawer(record) {
        this.visible = true;
        this.title = "工序详情"
        getAction(this.url.getProgressInfo,{id: record.id}).then(res => {
          if (res.success) {
            this.model = res.result;
          }else {
            this.$message.error(res.message)
          }
        })
      },
      onClose() {
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>